<template>
  <div class="radio-wrapper">
    <div class="header">
      <div class="cancel-svg" @click="onCancle">
        <SvgIcon
          svg-name="cancel"
          class-name="cancel-svg"
          color="var(--title-color)"
        />
      </div>
      <div class="title">{{ props.title }}</div>
      <div class="btn" @click="onConfirm">确定</div>
    </div>

    <div class="body">
      <div class="tab">
        <div
          :class="['item', item.id === modeVal ? 'active' : '']"
          v-for="item in modePopList"
          ::key="item.id"
          @click="handleModeClick(item.id)"
        >
          {{ item.text }}
        </div>
      </div>
      <div class="slider">
        <diiv class="title">档位</diiv>
        <diiv class="setting">
          <div class="cicle-start"></div>
          <van-slider
            v-model="currentLevel"
            bar-height="4px"
            active-color="#00D8AF"
            inactive-color="rgba(0, 0, 0, 0.04)"
            :min="1"
            :max="3"
          />
          <div class="cicle-end"></div>
        </diiv>
        <diiv class="value">{{ levelTitle }}</diiv>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, defineProps, defineEmits, watch, ref, computed } from 'vue'
import { deviceId, modePopList, modeLevel } from '../../utils/enum'
import EventBus from '@/assets/common/EventBus'
import { useStore } from 'vuex'
const store = useStore()

const props = defineProps(['mode', 'title', 'strength', 'randomOverlay'])
const emits = defineEmits(['emitModeChange', 'emitCancel'])

const modeVal = ref(1)
const currentLevel = ref(1)

const levelTitle = computed(() => {
  return modeLevel[currentLevel.value]
})

watch(
  () => props.randomOverlay,
  val => {
    modeVal.value = props.mode
    currentLevel.value = props.strength
  },
  { deep: true }
)

watch(
  () => props.mode,
  val => {
    modeVal.value = val
  },
  { deep: true, immediate: true }
)
watch(
  () => props.strength,
  val => {
    currentLevel.value = val
  },
  { deep: true, immediate: true }
)
const handleModeClick = id => {
  if (id == modeVal.value) return
  modeVal.value = id
}

const onCancle = () => {
  emits('emitCancel', 'mode')
  modeVal.value = props.mode
  currentLevel.value = props.strength
}

const onConfirm = () => {
  emits('emitModeChange', modeVal.value, currentLevel.value)
  Hejia.setControlParam(
    {
      // deviceId,
      parameters: {
        param: [
          {
            name: 'mode',
            content: modeVal.value
          },
          {
            name: 'strength',
            content: currentLevel.value
          }
        ]
      }
    },
    function () {
      // success, no response
    },
    function (msg, obj) {
      console.log(obj.resultCode + obj.resultCodeMessage)
    }
  )
}
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>
